<template>
  <div class="signin">
    <div class="signin-body">
      <scalebox>
        <view class="signin-body__info">
          <view class="signin-body__circle">
            <span v-if="signed">已签到</span>
            <van-button
              v-if="canSignin"
              color="linear-gradient(to bottom right, red, orange)"
              class="signin-body__circle-button"
              :disabled="!locationData"
              @click="onSignin"
            >签到</van-button>
          </view>
          <div class="signin-body__location">
            <van-icon name="location-o" />
            <span>{{ location || (locationData && locationData.address) || '定位您的位置' }}</span>
          </div>
        </view>
      </scalebox>
    </div>
    <div
      v-if="!location"
      class="signin-body-info-reset"
      @click="onLocation"
    >
      <van-button
        icon="replay"
        type="default"
        size="small"
      >{{ (canSignin && !location)? '定位位置':'重新定位'}}</van-button>
    </div>
  </div>
</template>

<script>
import Scalebox from '@/components/scalebox/index'
export default {
  components: {
    Scalebox
  },
  props: {
    gis: {
      type: Object,
      default: null
    }
  },
  computed: {
    signed () {
      if (this.gis && this.gis.status) {
        return true
      }
      return false
    },
    location () {
      if (this.gis && this.gis.location) {
        return this.gis.location
      }
      return ''
    },
    canSignin () {
      if (this.signed) {
        return false
      }
      return !this.location
    }
  },
  data () {
    return {
      locationData: null
      // locations: '签到区域：奥体中心体育场北广场'
    }
  },
  methods: {
    onSignin () {
      this.$emit('signin', this.locationData)
    },
    onLocation () {
      // wx.openSetting({
      //   success (res) {
      //     console.log('用户同意授权：', res.authSetting)
      //     // res.authSetting = {
      //     //   "scope.userInfo": true,
      //     //   "scope.userLocation": true
      //     // }
      //   }
      // })
      wx.getLocation({
        type: 'wgs84',
        isHighAccuracy: true,
        success: (res) => {
          console.log('location', res)
          const {latitude, longitude} = res
          this.locationData = {
            lat: latitude,
            lng: longitude,
            address: ''
          }
          this.getAddressDetail(latitude, longitude)
        }
      })
    },
    getAddressDetail (latitude, longitude) {
      var locationString = latitude + ',' + longitude
      wx.request({
        url: 'https://apis.map.qq.com/ws/geocoder/v1/',
        data: {
          key: 'N75BZ-UTB3K-7GGJW-AVMIL-MDT36-RYFTQ',
          location: locationString
        },
        method: 'GET',
        success: (r) => {
          // 输出一下位置信息
          console.log(r)
          console.log(r.data.result)
          console.log('用户位置信息', r.data.result.address)
          this.locationData.address = r.data.result.address
        }
      })
    },
    resetLocation () {
      // 获取定位
      wx.showToast({
        title: '定位失败',
        icon: 'none',
        duration: 3500
      })
      if (this.location) {
        this.$emit('resetloc', 'xxxxxxx')
      }
    }
  }
}
</script>

<style lang="less">
.signin {
  height: calc(100vh - 52px);
  position: relative;
  display: flex;
  flex-direction: column;
  &-button {
    width: 120px;
  }
}
@grey: #666;
@red: red;
.signin-body {
  height: 100%;
  overflow: hidden;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  &__circle {
    width: 120px;
    height: 120px;
    line-height: 1;
    border-radius: 60px;
    border: 5px solid #fff;
    font-size: 16px;
    color: #fff;
    background: gray;
    display: flex;
    align-items: center;
    justify-content: center;
    &-button {
      width: 100%;
      height: 100%;
      .van-button {
        width: 100%;
        height: 100%;
        border-radius: 120px !important;
        border: 0 !important;
      }
    }
  }
  &__info {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
  &__location {
    color: #666;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
  }
}
.signin-body-info-reset {
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  .van-button {
    border: 0;
    color: #666;
  }
}
.grey {
  color: @grey;
}
.red {
  color: @red;
}
</style>
